<template>
  <j-modal
    :title="title"
    :width="width"
    :visible="visible"
    switchFullscreen
    @cancel="handleCancel"
    @ok="handleSave"
    :maskClosable="false"
    cancelText="关闭"
  >
    <!--    <hte-file-class-form ref="realForm" @ok="submitCallback" :disabled="disableSubmit"></hte-file-class-form>-->
    <!-- 操作按钮区域 -->
    <div class="table-operator">
      <a-button @click="handleAdd" icon="plus">增加</a-button>
      <a-button @click="handleCopy" icon="plus">增加已存在的属性</a-button>
      <a-button @click="handleDel" icon="delete">删除</a-button>
      <a-button @click="handleSave" icon="save">保存</a-button>
      
    </div>
    <!-- table区域-begin -->
    <div>
      <a-table
        :columns="columns"
        :data-source="data"
        bordered
        :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
        rowKey="id"
        :pagination="false"
        :scroll="{ y: 500 }"
      >
        <a slot="name" slot-scope="text, record, index">
          <a-input style="margin: -5px 0" v-model="text" @change="(e) => handleChange(e.target.value, index, 'name')" />
        </a>
        <a slot="required" slot-scope="text, record, index">
          <a-switch
            checkedChildren="是"
            unCheckedChildren="否"
            v-model="text"
            @click="(c, e) => handleChange(c, index, 'required')"
          />
        </a>
        <a slot="sort" slot-scope="text, record, index">
          <a-input-number style="margin: -5px 0" v-model="text" @change="(e) => handleChange(e, index, 'sort')" />
        </a>
        <a slot="showInTable" slot-scope="text, record, index">
          <a-switch
            checkedChildren="是"
            unCheckedChildren="否"
            v-model="text"
            @click="(c, e) => handleChange(c, index, 'showInTable')"
          />
        </a>
         <a slot="showInDetails" slot-scope="text, record, index">
          <a-switch
            checkedChildren="是"
            unCheckedChildren="否"
            v-model="text"
            @click="(c, e) => handleChange(c, index, 'showInDetails')"
          />
        </a>
      </a-table>
    </div>
    <hte-file-class-attr-copy-modal ref="attrModalCopyForm"   @ok="handleOkCopy"/>
  </j-modal>
</template>

<script>
import { postAction, getAction } from '@/api/manage'
import HteFileClassForm from './HteFileClassForm'
import HteFileClassAttrCopyModal from './HteFileClassAttrCopyModal'
export default {
  name: 'HteFileClassAttrModal',
  components: {HteFileClassAttrCopyModal},
 
  data() {
    return {
      parentId:'',
      classId: '',
      columns: [
        {
          title: '属性名称',
          dataIndex: 'name',
          width: '30%',
          scopedSlots: { customRender: 'name' },
        },

        {
          title: '是否必填',
          dataIndex: 'required',
          width: '20%',
          scopedSlots: { customRender: 'required' },
        },
        {
          title: '排序',
          dataIndex: 'sort',
          width: '20%',
          scopedSlots: { customRender: 'sort' },
        },
        {
          title: '是否显示在列表',
          dataIndex: 'showInTable',
          width: '30%',
          scopedSlots: { customRender: 'showInTable' },
        },
         {
          title: '是否显示在明细',
          dataIndex: 'showInDetails',
          width: '30%',
          scopedSlots: { customRender: 'showInDetails' },
        },
      ],
      title: '',
      width: 800,
      visible: false,
      disableSubmit: false,
      data: [],
      selectedRowKeys: [],
      rowKeyIndex: -1,
      url: {
        save: '/lib/hteFileClass/saveAttr',
        listAttr: '/lib/hteFileClass/listAttr',
        deleteBatch: '/lib/hteFileClass/deleteAttrBatch',
      },
    }
  },
  methods: {
    add(classId) {
      this.visible = true
      this.classId = classId
      this.loadAttr()
    },

    close() {
      this.$emit('close')
      this.visible = false
    },
    handleCancel() {
      this.close()
    },

    handleChange(value, index, column) {
      // debugger
      this.$set(this.data[index],column,value)
    },
    handleAdd() {
      debugger
      this.data.push({ id: this.rowKeyIndex, name: '', required: false, sort: '' })
      this.rowKeyIndex--
    },
    handleCopy(){
      this.$refs.attrModalCopyForm.add(this.parentId)
      this.$refs.attrModalCopyForm.title = '增加已存在的属性'
      this.$refs.attrModalCopyForm.parentId=this.parentId
      this.$refs.attrModalCopyForm.attrData = this.data

    },
    handleOkCopy(data){
      data.forEach(item=>{
        this.data.push({ id: this.rowKeyIndex, name: item.name, required: item.required, sort: item.sort ,showInTable:item.showInTable ,showInDetails:item.showInDetails })  
        this.rowKeyIndex--
      })
    },
    loadAttr() {
      getAction(this.url.listAttr, { classId: this.classId }).then((res) => {
        if (res.success) {
          console.log(res)
          this.data = res.result
        }
      })
    },
    handleSave() {
      let that = this
      let showInTableCount = 0
      this.data.forEach((it, index) => {
        it.classId = that.classId
        if(it.showInTable){
            showInTableCount++
        }
      })
      // if(showInTableCount>5){
      //     return this.$message.warning("显示到列表的属性数量不能超过5个")
      // }
      postAction(this.url.save, this.data).then((res) => {
        if (res.success) {
          this.$message.success(res.message)
          this.loadAttr()
        } else {
          this.$message.warning(res.message)
        }
      })
    },
    handleDel() {
      debugger
      var that = this
      this.$confirm({
        title: '确认删除',
        content: '是否删除选中数据?',
        onOk: function () {
          let ids = ''
          that.selectedRowKeys.forEach((key) => {
            if (key > 0) {
              ids += key + ','
            }
            const index = that.data.findIndex((v) => v.id === key)
            that.data.splice(index, 1)
          })
          getAction(that.url.deleteBatch, { ids: ids }).then((res) => {
            if (res.success) {
              //重新计算分页问题
              // that.reCalculatePage(that.selectedRowKeys.length)
              that.$message.success(res.message)
              // that.onClearSelected()
              this.loadAttr()
            } else {
              that.$message.warning(res.message)
            }
          })
        },
      })
    },
    onSelectChange(selectedRowKeys) {
      console.log('selectedRowKeys changed: ', selectedRowKeys)
      this.selectedRowKeys = selectedRowKeys
    },
  },
}
</script>
